<template>
  <el-menu
    :default-active="activePath"
    :router="true"
    class="el-menu-vertical-demo"
    background-color="lightgreen"
  >
    <!-- 使用 v-for 遍历菜单项 -->
    <template v-for="route in authMenuList" :key="route.path">
      <!-- 因为是 -->
      <el-sub-menu 
      :index="route.path" 
      @click="handleClick(route.path, $event)"
      >
      <template #title>
        <span>{{ route.meta?.title }}</span>
      </template>
        <el-menu-item :index="route.path" v-if="route.children">
          {{ route.children[0].meta?.title }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { defineComponent, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'


// props
const { authMenuList } = defineProps<{
  authMenuList: RouteRecordRaw[] 
}>();

// 保证菜单不会因为刷新也丢失选中状态 可能存在设计问题 黄色警告无法消除
const route = useRoute()
const activePath = computed(() => route.path)

// 路由跳转
const router = useRouter()
const handleClick = (path: string, event: Event): void => {
  router.push(path)
}

// 组件显式命名 
defineComponent({
  name: 'RecursiveMenuComponent',
})

</script>